import { ReactNode } from 'react';

import { zing } from '@/shared/fonts';
import cn from 'classnames';

import cs from './MythCard.module.scss';

export const MythCard = ({ myth, truth }: { myth: ReactNode; truth: ReactNode }) => (
  <div className={cs.card}>
    <div className={cs.side}>
      <div className={cn(cs.tag, zing.className, cs.myth)}>популярный миф</div>
      {myth}
    </div>
    <div className={cs.side}>
      <div className={cn(cs.tag, zing.className, cs.truth)}>правда</div>
      {truth}
    </div>
  </div>
);
